<template>
	<view>
		<u-tabs :list="brotherCategory" @click="switchFn" lineColor="#ee0a24" lineWidth="40px" :current="currentNum">
		</u-tabs>
		<view class="goodsTitle">
			{{titleName}}
		</view>
		<view class="frontBox">
			{{frontName}}
		</view>
		<view style="height: 100rpx;"></view>
		<goodsList :list="goodsList"></goodsList>
	</view>
</template>

<script>
	import {
		CategoryGoodsApi, //分类页面商品列表请求
		CategoryApi
	} from "../request/api.js"
	import request from "../request/request.js"
	import {
		SIZE
	} from "../../config/config.js"
	export default {
		data() {
			return {
				filterCategory: [],
				goodsList: [],
				page: 1,
				brotherCategory: [],
				currentCategory: {},
				currentNum: 0,
				frontName: '',
				titleName: ''

			}
		},
		methods: {
			// 封装分类页面商品列表请求
			reuseClassGoodsFn(id) {
				request({
					url: CategoryGoodsApi,
					data: {
						categoryId: id,
						page: 1,
						size: 1000
					},
					successCb: res => {
						this.goodsList = res.goodsList
						this.filterCategory = res.filterCategory
					}
				})
			},
			switchFn(item) {
				// console.log(item);
				this.reuseClassGoodsFn(item.id)
				if (window) {
					window.history.replaceState(null, "", `#/pages/channel/channel?id=${item.id}`)
				}
				this.titleName = item.name
				this.frontName = item.front_name
			}
		},
		onLoad(option) {
			this.reuseClassGoodsFn(option.id)
			request({
				url: CategoryApi,
				data: {
					id: option.id,
				},
				successCb: res => {
					this.brotherCategory = res.brotherCategory
					this.currentCategory = res.currentCategory
					this.currentNum = res.brotherCategory.findIndex(item => item.id == option.id)
					this.titleName = res.currentCategory.name
					this.frontName = res.currentCategory.front_name
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #9bc0e3;
	}

	.goodsTitle {
		background-color: #efefef;
		font-size: 36rpx;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #333333;

	}

	.frontBox {
		background-color: #efefef;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		color: #666;
		text-align: center;
	}
</style>
